<template>
  <div>
    <h1>情况二：watch监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
let person = ref({
  name: "小王",
  age: 18,
});
function changeName() {
  person.value.name += "~";
}
function changeAge() {
  person.value.age += 1;
}
function changePerson() {
  person.value = { name: "小张", age: 20 };
}
//监视ref是对象类型：
//情况二：watch监视【ref】定义的【对象类型】数据；监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视（第三个配置参数；是个对象：deep: true）；immediate：默认false，立即执行一次回调函数；为true代表立即执行一次回调函数
//第一参数：监视谁？ 第二个参数：回调函数；第三个参数是对象配置属性：deep: true, immediate: true
//当person数据变化了，第二个参数会执行
// watch(谁?回调函数,{对象属性})
/**
 * watch()的第一个参数是：被监视的数据对象或数组；
 * watch()的第二个参数是：监视的回调函数；
 * watch()的第三个参数是：配置对象（deep,immediate等属性）
 **/

watch(
  person,
  (newValue, oldValue) => {
    console.log("person数据变化了", newValue, oldValue);
  },
  { deep: true, immediate: true }
);
</script>

<style scoped></style>
